Sass 自動化 - condition 與 loop

if-else/ for-loop/ list/ object

Sass 裡面類似 array 的東西，我們叫他 list。前面是變數名稱，後面用逗號隔開。
Sass 的 map 類似 JS 的物件，用小括號將他括起來，前面是 KEY 後面是 Value，再用逗號隔開。

$direction-types: center, start, end
$direction-types: (center: center, start: flex-start, end: flex-end)

若想要用上述預先開好的 list 或 map，可以透過迴圈生成出想要的樣式

@each 表示每個在這裡面的東西、名稱中要使用變數要加上 # 和大括號，在屬性中就不用再加上大括號。

舉例、each 搭配 list

目標的 sass

$direction-types: center, start, end

@each $type in $direction-types
  .flex-#{$type}
    display: flex
    justify-content: $type
    align-items: center

生成的 css

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: start;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: end;
  align-items: center;
}

舉例、each 搭配 map

$direction-types: (center: center, start: flex-start, end: flex-end)

@each $type, $value in $direction-types
  .flex-#{$type}
    display: flex
    justify-content: $value
    align-items: center

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

each 的用法很適合搭配我們開好的變數使用。

舉例、for-loop 適合處理數字

通常用在字級，h1 ~ h12 希望按照某個運算規則開好。動畫、資料視覺化，希望將長度的 class 開好，也很適合用 for-loop。

迴圈會用在預先開好功能型的 class，或是做特效網站搭配一些隨機效果、不同大小立即性的使用

@for $i from 0 through 5
  .h#{5 - $i + 1}
    font-size: 1 + 0.2rem * $i

.h6 {
  font-size: 1rem;
}

.h5 {
  font-size: 1.2rem;
}

.h4 {
  font-size: 1.4rem;
}

.h3 {
  font-size: 1.6rem;
}

.h2 {
  font-size: 1.8rem;
}

.h1 {
  font-size: 2rem;
}

現在，假設我字級規則比較複雜，遇到偶數乘 0.2rem ，遇到奇數乘 0.3rem
sass 的判斷是兩個等於，不是三個等於

@for $i from 0 through 5
  .h#{5 - $i + 1}
    @if $i / 2 == 0
      font-size: 1 + 0.2rem * $i
    @else 
      font-size: 1 + 0.3rem * $i

參照官方文件 flow-control